<template>
  <view><view class="song_container">
      <text class="iconfont icon-keaide" style="font-size: 50rpx;"></text>
      <text style="transform: translateX(-200rpx); line-height:70rpx; font-size:30rpx">喜欢歌曲</text>
      <text class="iconfont icon-keaide" style="font-size: 60rpx;"></text>
    </view>
    <view class="scroll_container">
      <view v-for="item in loveSongs" :key="item.id" class="recommend_container" @click="navTosongsDetail(item.id)">
        <image :src="item.al.picUrl" mode="widthFix"></image>
        <view class="text">
          <text>{{ item.name }}</text>
          <text class="wyf">{{ item.ar[0].name + ' -' + item.al.name }}</text>
        </view>
        <text class="iconfont icon-gengduo-shuxiang"></text>
      </view>
    </view></view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      loveSongs:[]
    }
  },
  computed: {
    // 以下两种方式都可以
    // ...mapState({ token: state => state.login.token })
    ...mapState('login', ['cookie', 'userInfo', 'orUserinfo'])
  },
  onLoad() {
    if (this.userInfo.nickname) {
      // console.log(111);
      this.getLoveSongs(this.userInfo.userId,this.cookie)
    } else if (this.orUserinfo.nickname) {
      this.getLoveSongs(this.orUserinfo.userId,this.cookie)
    }
  },
  methods: {
    async getLoveSongs(uid,cookie) {
      const { data: res } = await uni.$http.get('likelist', { uid,timestamp: new Date().getTime()})
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('喜欢歌曲列表获取失败')
      res.ids.forEach(item=>{
        this.getSongsdetail(item)
      })
    },
    async getSongsdetail(ids) {
      const { data: res } = await uni.$http.get('song/detail', { ids })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('喜欢歌曲信息获取失败')
      this.loveSongs.push(res.songs[0])
    },
    navTosongsDetail(id) {
          uni.navigateTo({
            url: '/subpkg/songs_detail/songs_detail?id=' + id
          })
        },
  }
}
</script>

<style lang="scss" scoped>
  .song_container {
    display: flex;
    justify-content: space-between;
    // margin-top: 140rpx;
    height: 80rpx;
    position: relative;
    overflow: hidden;
  }
  .iconfont {
    margin: 0 10rpx;
    width: 80rpx;
    height: 80rpx;
  }
  .icon-bofangqi-bofangshu {
    font-size: 70rpx;
  }
  
  .recommend_container {
    position: relative;
    display: flex;
    margin: 15rpx 0 15rpx 20rpx;
  }
  .recommend_container image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
  }
  .text {
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    // justify-content: flex-start;
    // align-items: flex-start;
    font-size: 28rpx;
    margin-left: 20rpx;
  }
  .text .wyf {
    color: #808080;
    font-size: 24rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 15rpx;
    max-width: 400rpx;
  }
  .scroll_container {
    height: calc(100vh - 380rpx);
  }
  .icon-gengduo-shuxiang {
    position: absolute;
    right: 0;
    margin: 0 -20rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
</style>
